<template>
    <div class="classfiy">
        <!--    多条件查询表单-->
        <el-form :inline="true" :model="queryParams" class="demo-form-inline">
            <el-form-item label="题库分类名称">
                <el-input v-model="queryParams.bankName" placeholder="题库分类名称" style="width: 300px;"></el-input>
            </el-form-item>
            <el-form-item label="分类层级">
                <!-- 选中的值存放在这里面 -->
                <el-select v-model="queryParams.bankLevel" placeholder="请选择" style="width: 500px;">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="search" style="margin-left: 20px;">查询</el-button>
                <el-button @click="resetData">重置</el-button>
            </el-form-item>
        </el-form>
        <!-- 按扭 -->
        <el-row class="button-er">
            <el-button type="primary" @click="addClassify">新增题库分类</el-button>
            <el-button style="margin-left: 20px;" @click="handleDelete">批量删除</el-button>
        </el-row>
        <!-- 新增的题库分类或者修改form表单 -->
        <el-dialog title="新增题库" :visible.sync="dialogVisible" width="30%" >
            <el-form ref="form" :model="questionBank" label-width="120px" :rules="rules">
                <el-form-item label="题库分类名称" prop="bankName">
                    <el-input v-model="questionBank.bankName"></el-input>
                </el-form-item>
                <el-form-item label="分类层级" prop="bankLevel">
                    <el-select v-model="questionBank.bankLevel" placeholder="请选择" style="width: 300px;">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="创建人" prop="createPerson">
                    <el-input v-model="questionBank.createPerson"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitData">提交</el-button>
                    <el-button @click="dialogVisible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- 表格 -->
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%;margin-top: 10px;"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="30">
            </el-table-column>
            <el-table-column type="index" width="100" label="序号">
            </el-table-column>
            <el-table-column prop="bankName" label="题库分类名称" width="120">
            </el-table-column>
            <el-table-column prop="bankLevel" label="分类层级" align="center">
            </el-table-column>
            <el-table-column prop="createPerson" label="创建人" align="center">
            </el-table-column>
            <el-table-column prop="updateTime" label="最新修改时间" align="center">
            </el-table-column>
            <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                    <el-row>
                        <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                            v-hasPermi="['system:user:edit']">修改</el-button>
                        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                            v-hasPermi="['system:user:remove']">删除</el-button>
                    </el-row>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页组件引入,已经在全局引用了直接使用 -->
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />
    </div>
</template>

<script>
import { listBank, updateBank, addBank, delBank } from '../../../api/system/questionbank';
export default {
    data() {
        return {
            // 总条数
            total: 1,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                bankName: undefined,
                bankLevel: undefined
            },
            //表格数据
            tableData: [{
                bankName: "语文库",
                bankLevel: "一级",
                createPerson: "周翔",
                updateTime: '2021-09-21 08:50:08'
            }],
            //选中的数据
            multipleSelection: [],
            //新增对话框的显示
            dialogVisible: false,
            //题库对象
            questionBank: {},
            options: [
                {
                    value: "1",
                    label: "一级"
                },
                {
                    value: "2",
                    label: "二级"
                }],
            // 表单校验
            rules: {
                bankName: [
                    { required: true, message: "题库名字不能为空" },
                    // { min: 2, max: 20, message: '用户名称长度必须介于 2 和 20 之间', trigger: 'blur' }
                ],
                bankLevel: [
                    { required: true, message: "分类等级不能为空"}
                ],
                createPerson: [
                    { required: true, message: "创建人名字不能为空"},
                    // { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' },
                ],
            }
        }
    },
    created() {
        //获取列表
        this.getList();
    },
    methods: {
        /** 查询题库列表 */
        getList() {
            this.loading = true;
            listBank(this.queryParams).then(response => {
                console.log(response)
                //表格数据
                this.tableData = response.rows;
                //总条数
                this.total = response.total;
                this.loading = false;
            });
        },
        //重置按钮
        resetData() {
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                bankName: undefined,
                bankLevel: undefined
            }
        },
        handleUpdate(row) {
            this.questionBank = row
            this.dialogVisible = true
        },
        addClassify() {
            this.reset();
            this.dialogVisible = true
        },
        //重置表单
        reset() {
            this.questionBank = {
                bankName: null,
                bankLevel: null,
                createPerson: null
            }

        },
        //删除方法
        handleDelete(row) {
            const bankIds = row.bankId || this.multipleSelection;
            this.$modal.confirm('是否确认删除题库编号为"' + bankIds + '"的数据项？').then(function () {
                return delBank(bankIds);
            }).then(() => {
                this.getList();
                this.$modal.msgSuccess("删除成功");
            }).catch(() => { });
        },
        //查询方法
        search() {
            this.getList()
        },
        submitData() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.questionBank.bankId != null) {
                        updateBank(this.questionBank).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.dialogVisible = false;
                            this.getList();
                        });
                    } else {
                        addBank(this.questionBank).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            this.dialogVisible = false;
                            this.getList();
                        });
                    }
                }
            });
        },
        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {
            //this.ids = selection.map(item => item.bankId)
            this.multipleSelection = val.map(item => item.bankId)

            console.log(this.multipleSelection)
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        }
    }
}
</script>

<style>
.classfiy {
    height: 1000px;
    border: 1px solid #ccc;
    margin: 20px;
    background-color: #fff;
}
</style>